<template>
  <div class="calculator" :id="moveId" :style="calStyles">
    <div class="header" :id="grabId">计算器</div>
    <div class="screen">
      <div class="screen-operation-log">
        <div class="screen-operation-log-content">{{ operationList.join(' ') }}</div>
      </div>
      <div class="screen-main-num-box">
        <div class="screen-main-num">{{ mainNumString }}</div>
      </div>
    </div>
    <div class="keyboard-plate">
      <div class="keyboard-floor" v-for="(floor, i) in keyboardData" :key="i">
        <div
          v-for="(item, i) in floor"
          :key="i"
          :class="['keyboard', item.type]"
          :style="item.style"
          :title="item.title"
          @click="item.onClick"
        >
          <template v-if="item.text">{{ item.text }}</template>
          <MyIcon v-else-if="item.icon" :icon="item.icon" class="my-icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({ name: 'CalculatorIndex' })
</script>
<script setup lang="ts">
import { defineComponent, onUnmounted, ref } from 'vue'

import Calculator from '@/utils/modules/Calculator'
import MouseMover from '@/utils/modules/MouseMover'
import MyIcon from '@/components/MyIcon.vue'

const props = defineProps({
  id: Number,
  width: String,
  height: String
})

const grabId = ref('calculator-header' + props.id)
const moveId = ref('calculator' + props.id)

const Cal = new Calculator({
  keyboardOnClickCallback: (params) => {
    mainNumString.value = params.mainNumString
    operationList.value = params.operationList
  }
})
const MO = new MouseMover({ id: [grabId.value, moveId.value] })

onUnmounted(() => {
  MO.destroy()
})

const calStyles = ref({
  width: props.width || '320px',
  height: props.height || '515px'
})
const mainNumString = ref('0') // 主屏number的半成品
const operationList = ref<string[]>(['0']) // 运算队列

const keyboardData: any = ref([
  [
    { text: '%', title: '余数', onClick: () => Cal.keyboardOnClick('%') },
    { text: '√', title: '开方', onClick: () => Cal.keyboardOnClick('√') },
    { text: 'x²', title: '二次方', onClick: () => Cal.keyboardOnClick('x²') },
    { text: '1/x', title: '反比', onClick: () => Cal.keyboardOnClick('1/x') }
  ],
  [
    { text: 'CE', title: '清除当前数据', onClick: () => Cal.keyboardOnClick('CE') },
    { text: 'C', title: '清除全部数据', onClick: () => Cal.keyboardOnClick('C') },
    { text: 'back', onClick: () => Cal.keyboardOnClick('back') },
    { text: '/', onClick: () => Cal.keyboardOnClick('/') }
  ],
  [
    { text: '7', type: 'num', onClick: () => Cal.keyboardOnClick('7') },
    { text: '8', type: 'num', onClick: () => Cal.keyboardOnClick('8') },
    { text: '9', type: 'num', onClick: () => Cal.keyboardOnClick('9') },
    { icon: 'Close', onClick: () => Cal.keyboardOnClick('*') }
  ],
  [
    { text: '4', type: 'num', onClick: () => Cal.keyboardOnClick('4') },
    { text: '5', type: 'num', onClick: () => Cal.keyboardOnClick('5') },
    { text: '6', type: 'num', onClick: () => Cal.keyboardOnClick('6') },
    { icon: 'Minus', onClick: () => Cal.keyboardOnClick('-') }
  ],
  [
    { text: '1', type: 'num', onClick: () => Cal.keyboardOnClick('1') },
    { text: '2', type: 'num', onClick: () => Cal.keyboardOnClick('2') },
    { text: '3', type: 'num', onClick: () => Cal.keyboardOnClick('3') },
    { icon: 'Plus', onClick: () => Cal.keyboardOnClick('+') }
  ],
  [
    { text: '+/-', onClick: () => Cal.keyboardOnClick('+/-'), style: { fontSize: '20px' } },
    { text: '0', type: 'num', onClick: () => Cal.keyboardOnClick('0') },
    {
      text: '.',
      onClick: () => Cal.keyboardOnClick('.'),
      style: { fontSize: '26px', fontWeight: '600' }
    },
    { text: '=', onClick: () => Cal.keyboardOnClick('='), style: { fontSize: '26px' } }
  ]
])
</script>

<style lang="scss" scoped>
.calculator {
  display: flex;
  flex-direction: column;
  background-color: rgba(224, 224, 224, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid #666;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #000;
  overflow: hidden;
  user-select: none;
  position: relative;
  .header {
    background-image: linear-gradient(to right, rgba(251, 251, 251, 0.5), rgba(251, 251, 251, 0.1));
    font-size: 14px;
    height: 3em;
    line-height: 3;
    padding: 0 10px;
  }
  .screen {
    display: flex;
    flex-direction: column;
    height: 24%;
    .screen-operation-log {
      height: 30%;
      display: flex;
      align-items: center;
      text-align: right;
      position: relative;
      .screen-operation-log-content {
        flex: 1;
        color: #666;
        font-size: 14px;
        text-align: right;
        white-space: nowrap;
        position: absolute;
        right: 10px;
      }
    }
    .screen-main-num-box {
      display: flex;
      align-items: center;
      height: 60%;
      padding: 0 10px;
      .screen-main-num {
        flex: 1;
        font-size: 44px;
        font-weight: 600;
        text-align: right;
      }
    }
  }
  .keyboard-plate {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2px;
    .keyboard-floor {
      flex: 1;
      display: flex;
      .keyboard {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        border: 1px solid rgba(0, 0, 0, 0);
        background-color: rgba(247, 247, 247, 0.5);
        color: #000;
        cursor: pointer;
        height: calc(100% - 4px);
        margin: 2px;
        transition: background-color 0.1s, border 0.1s;
        &.num {
          font-size: 22px;
          font-weight: 600;
          background-color: rgba(255, 255, 255, 0.7);
          &:hover {
            background-color: rgba(255, 255, 255, 0.05);
          }
        }
        &:hover {
          border: 1px solid rgba(0, 0, 0, 0.1);
          background-color: rgba(0, 0, 0, 0.05);
        }
        .my-icon {
          color: #000;
        }
      }
    }
  }
}
</style>
